<template>
	<section v-show="navBarShow">
		<transition name="slide-fade" >
			<div class="navbar" v-show="navBarShow">
				<div v-for="(all,i) in allTypeVariety" :key="i">
					<h4 class="tl pl15 lh40 bold">{{all[0].typeName}}</h4>
					<div class="clearfix lh30 pl10 pr10 ">
						<span @click.stop="setVariety(item)"
							class="fl" v-for="(item,idx) in all" :key="idx">
							<i class="bggray" :class="{bgyellow:curVariety.varietyName==item.varietyName}">{{item.varietyName}}</i>
						</span>
					</div>
				</div>
			</div>
		</transition>
	</section>
</template>
<script>
	import { mapState, mapMutations } from "vuex";
	export default {
		name: "navBar",
		computed: {
			...mapState(["curVariety", "navBarShow", "allTypeVariety"])
		},
		methods: {
			...mapMutations(["setCurVariety", "setNavBarShow"]),
			setVariety(item) {
				this.$store.commit('setCurVariety', item)
				this.$store.commit('setNavBarShow',false)
			}
		}
	};
</script>
<style scoped lang='scss'>
	section {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 99999;
		top: rem(40px);
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	section span {
		width: 25%;
		margin-bottom: rem(5px);
	}

	section span i {
		margin-left: rem(5px);
		margin-right: rem(5px);
		display: block;
		border-radius: rem(2px);
	}
	.navbar{
		background-color: #fff;
	}
	.slide-fade-enter-active {
		transition: all 0.3s ease;
	}
	.slide-fade-leave-active {
		transition: all 0.3s ease;
	}
	.slide-fade-enter,
	.slide-fade-leave-to {
		transform: translateY(rem(-400px));
	}
</style>